jQuery for Picture Transparency in Response to Mouse Events [demo Source Download Attached]

2021-06-28 10:53:45
OfStack

This article illustrates jQuery's image transparency in response to mouse events.Share it for your reference, as follows:

Ideas to achieve:

1. Trigger the mouseover mouseenter event when the mouse is over the picture (the picture becomes transparent)

2. Trigger the mouseleave mouseout event when the mouse leaves the picture (the picture becomes opaque)

The code is as follows:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript"> 
$(document).ready(
  function(){
    $("#img_id").bind("mouseover mouseenter",function(){
      $(this).fadeTo("slow", 0.66);
    });
    $("#img_id").bind("mouseleave mouseout",function(){
      $(this).fadeTo("fast", 1);
    });
  }
);
</script>
<title> Picture transparency </title>
</head>
<img src="logo.gif" id="img_id" height="78" width="215"/>
<body>
</body>
</html>

Full sample code click here to download.

More readers interested in jQuery-related content can view this site's topics: jQuery Common Plug-ins and Usage Summary, Ajax Usage Summary in jquery, jQuery Table (table) Operation Skills Summary, jQuery Drag and Skills Summary, jQuery Extension Skills Summary, jQuery Common Classic Skills Summary, andjQuery Animation and Utility Summary and jquery Selector Usage Summary

I hope that the description in this paper will be helpful to everyone's jQuery program design.